<template>
  <div class="container">
    <div class="app-container">
      <template>
        <el-row>
          <span style="margin-left: 20px;">企业名称：</span>
          <el-input placeholder="请输入企业名称" style="width: 200px;margin-right: 20px;margin-top: 20px;" size="mini" />
          <span>缴费事件：</span>
          <el-date-picker
            v-model="value1"
            style="width: 250px;margin-right: 20px;"
            size="mini"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
          <el-button type="primary" size="mini" style="border-radius: 4px;">查询</el-button>
        </el-row>
        <el-row>
          <el-button type="primary" size="mini" style="margin-left: 20px;margin-top: 40px;border-radius: 4px;">添加账单</el-button>
        </el-row>
        <el-table v-loading="loading" :data="list" style="width: 100%;">
          <el-table-column label="序号" type="index" />
          <el-table-column label="账单编号" prop="billNumber" />
          <el-table-column label="企业名称" prop="enterpriseName" width="220px" />
          <el-table-column label="租赁楼宇" prop="buildingName" />
          <el-table-column label="物业费(元/m²)" prop="propertyFeePrice" />
          <el-table-column label="账单金额(元)" prop="paymentAmount" />
          <el-table-column label="缴费时间" prop="createTime" width="150px" />
          <el-table-column label="操作">
            <template>
              <el-button type="text" size="mini">查看</el-button>
              <el-button type="text" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end">
          <el-pagination
            :page-sizes="[10,20,50,100]"
            :page-size="pageParams.pagesize"
            :current-page="pageParams.page"
            :total="pageParams.total"
            layout="total, prev, pager, next, sizes, jumper"
            @current-change="changePage"
            @size-change="changecurrent"
          />
        </el-row>
      </template>
    </div>
  </div>
</template>
<script>
import { getPropertyListAPI } from '@/api'

export default {
  name: 'IntegratedPoleManagement',
  data() {
    return {
      value1: '',
      loading: false,
      pageParams: {
        page: 1,
        pagesize: 5,
        total: 0
      },
      list: []
    }
  },
  created() {
    this.getPropertyList()
  },
  methods: {
    async getPropertyList() {
      this.loading = true
      const { rows, total } = await getPropertyListAPI(this.pageParams)
      this.list = rows
      this.pageParams.total = total
      this.loading = false
    },
    async changePage(newPage) {
      this.loading = true
      this.pageParams.page = newPage // 赋值当前页码
      await this.getPropertyList()
      this.loading = false
    },
    async changecurrent(newcurrent) {
      this.loading = true
      this.pageParams.pagesize = newcurrent
      await this.getPropertyList()
      this.loading = false
    }
  }
}
</script>
